<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css_浮动</title>
	<link rel="stylesheet" href="style.css">
	<style>

		div ul {float:left;}
		div ul li{float: left; margin:0 10px; cursor: pointer;
			border-right :1px solid red;
			padding:0 20px 0 0;
		}
        div ul li:last-child{
            border-right :none;
        }


		.div{width: 200px; height: 200px}
		/**
			浮动后,元素会脱离文档流.它原来占有的空间,就会由后续元素来补充.
			浮动后,它会拥有行级元素的特性.

			浮动在右侧时,它的定位基点就变成了右上角.右顶点是浏览器右边栏的位置.

			清除浮动带来的影响,可以用清除浮动来实现.  clear: left right both;
			clear:both;  清除左右浮动height值最大的那一个元素.
		*/
		#div1{background:red; float:left; height: 200px;}
		#div2{background:green; float:right; height: 300px;}
		#div3{background:blue;  }

		#div5{border:1px solid black;
		margin:0 0 200px 0 ;
		}

		#div5 div{width: 100px; height: 100px ; float: left;}

		#div5 div:nth-child(1){background-color: red;}
		#div5 div:nth-child(2){background-color: green;}
		#div5 div:nth-child(3){background-color: blue;}
		#div5 div:nth-child(4){background-color: pink;}

	</style>
</head>
<body>

<!--练习:实现田字格-->

<!--div#div5>div*4-->
<div id="div5" class="div">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>


<!--div#div1+div#div2-->
<div id="div1" class="div">  div1 </div>
<div id="div2" class="div">  div2 </div>
<!--div.clear-->
<div class="clear"></div>
<div id="div3" class="div">  div3 </div>
<hr>

	<!--div>ul>li*5-->
	<div>
		<ul>
			<li>主页</li>
			<li>收藏</li>
			<li>商品</li>
			<li>介绍</li>
			<li>联系我们</li>
		</ul>
	</div>
	<br>



</body>
</html>